<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Paragraph from "./Paragraph.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import Title from "./Title.svelte";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Base/Typography/Paragraph",
        component: Paragraph,
        tags: ["autodocs"],
        argTypes: {
            type: {
                control: { type: "select" },
                options: ["default", "secondary", "warning", "error", "success", "primary"],
                table: {
                    defaultValue: { summary: "default" },
                },
            },
            size: {
                control: { type: "select" },
                options: ["small", "default", "large"],
            },
        },
        args: {},
    });

    let width = $state(300);
</script>

<Story name="Normal">
    {#snippet template(args)}
        <Space dir="v">
            <Paragraph>
                Javascript
                是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
            </Paragraph>
        </Space>
    {/snippet}
</Story>

<Story name="Spacing">
    {#snippet template(args)}
        <Space dir="v">
            <Title heading={5}>默认行距</Title>
            <Paragraph>
                Javascript
                是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
            </Paragraph>
            <Title heading={5}>宽松行距</Title>
            <Paragraph spacing="extended">
                Javascript
                是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
            </Paragraph>
        </Space>
    {/snippet}
</Story>

<Story name="Copyable" args={{ copyable: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <Paragraph {...args}>CMUI Web 组件库。</Paragraph>
        </Space>
    {/snippet}
</Story>

<Story name="CopyText" args={{ copyText: "自定义内容", copyable: true }}>
    {#snippet template(args)}
        <Space dir="v">
            <Paragraph copyable copyText="自定义内容">自定义拷贝内容。</Paragraph>
        </Space>
    {/snippet}
</Story>

<Story name="Ellipsis">
    {#snippet template(args)}
        <Paragraph style="width: 300px" ellipsis>
            Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
        </Paragraph>
        <Paragraph style="width: 300px" ellipsis={{ rows: 3 }}>
            Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
        </Paragraph>
        <Paragraph style={`width: ${width}px`} ellipsis={{ rows: 3, expandable: true, collapsible: true }}>
            Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
        </Paragraph>
        <Button
            onclick={() => {
                width = 400;
            }}>尺寸</Button
        >
    {/snippet}
</Story>

<Story name="Tooltip">
    {#snippet template(args)}
        <div style="width: 300px; padding-top: 150px;">
            <Paragraph ellipsis={{ showTooltip: true }}>Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客</Paragraph>
        </div>
    {/snippet}
</Story>
